<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>博雅诗词管理系统</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="/bootstrap/css/bootstrap.css" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="/bootstrap/css/bootstrap-theme.css" crossorigin="anonymous">

    <script src="/js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="/bootstrap/js/bootstrap.js"></script>
    <!--引入echarts-->
    <script src="/js/echarts.min.js"></script>
    <link rel="stylesheet" th:href="@{/css/poem.css}">
</head>
<body>
    <!-- 导航 -->
    <nav class="navbar navbar-inverse navbar-fix-top" role="navigation">
        <div class="container" th:replace="fragments/header::header">
        </div>
    </nav>
    <div class="container">
        <div class="row">
            <div class="col-sm-4">
                <ul class="nav nav-list">
                    <li class="nav-header">
                        统计信息
                    </li>
                    <li class="active">
                        <a href="/admin/index/">系统首页</a>
                    </li>
                    <li>
                        <a href="/admin/index/">用户统计</a>
                    </li>
                    <li>
                        <a href="#">诗词统计</a>
                    </li>
                    <li class="nav-header">
                        审核管理
                    </li>
                    <li>
                        <a href="/admin/note/1">注释审核</a>
                    </li>
                    <li>
                        <a href="/admin/translate/1">译文审核</a>
                    </li>
                    <li>
                        <a href="/admin/appreciation/1">赏析审核</a>
                    </li>
                    <li>
                        <a href="/admin/story/1">故事审核</a>
                    </li>
                    <li class="divider">
                    </li>
                    <li>
                        <a href="/admin/difficult">系统帮助</a>
                    </li>
                </ul>
            </div>
            <div class="col-sm-8">
                <div id="main" style="width: 600px;height:400px;"></div>
            </div>
            </div>
        </div>
    </div>
    <div th:replace="fragments/footer::footer"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 显示动画
        myChart.showLoading();

        // 请求数据
        var names = [];
        var logins = [];
        var signups = [];

        $.ajax({
            type : "post",
            async : true,           //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
            url : "/admin/getUserEveryDay",    //请求发送到TestServlet处
            data : {},
            dataType : "json",        //返回数据形式为json
            success : function(result) {
                //请求成功时执行该函数内容，result即为服务器返回的json对象
                if (result.result == 0) {
                    for(var i=0;i<result.names.length;i++){
                        names.push(result.names[i]);    //挨个取出类别并填入类别数组
                    }
                    for(var i=0;i<result.logins.length;i++){
                        logins.push(result.logins[i]);    //挨个取出销量并填入销量数组
                    }
                    for(var i=0;i<result.signups.length;i++){
                        signups.push(result.signups[i]);    //挨个取出销量并填入销量数组
                    }
                    console.log(names);
                    console.log(logins);
                    console.log(signups);
                    myChart.hideLoading();    //隐藏加载动画
                    myChart.setOption({        //加载数据图表
                        title: {
                            text: '用户统计'
                        },
                        legend: {
                             data:['登录','注册']
                        },
                        tooltip: {},
                        xAxis: {
                            data: names
                        },
                        yAxis: {},
                        series: [
                            {
                                // 根据名字对应到相应的系列
                                name: '登录',
                                type: 'line',
                                data: logins
                            },
                            {
                                name: '注册',
                                type: 'line',
                                data: signups
                            }
                        ]
                    });

                }

            },
            error : function(errorMsg) {
                //请求失败时执行该函数
                alert("图表请求数据失败!");
                myChart.hideLoading();
            }
        })

        // 指定图表的配置项和数据
        // var option = {
        //     title: {
        //         text: 'ECharts 入门示例'
        //     },
        //     tooltip: {},
        //     legend: {
        //         data:['销量','利润']
        //     },
        //     xAxis: {
        //         data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        //     },
        //     yAxis: {},
        //     series: [
        //         {
        //             name: '销量',
        //             type: 'line',
        //             data: [5, 20, 36, 10, 10, 20]
        //         },
        //         {
        //             name: '利润',
        //             data: [82, 93, 90, 93, 129, 133, 102],
        //             type: 'line'
        //         }
        //     ]
        // };




        // 使用刚指定的配置项和数据显示图表。
        //myChart.setOption(option);
    </script>
</body>
</html>